<template>
	<div class="main_content_1">
		<div style="display: flex;justify-content: space-between;align-items: center;">
			<ul class="staTabName">
				<li class="active" @click="$router.push('/SchoolManagement')" style="margin-left: 0rem;">人员管理</li>
				<li @click="$router.push('/ProfessionalManagement')">专业管理</li>
				<li @click="$router.push('/CollegeManagement')">学院管理</li>
			</ul>
			<div class="dataSearch" style="display: flex;">

				<el-dropdown>
					<div style="margin-right: 1.25rem;color: #cecece;cursor: pointer;">
						<i class="el-icon-download"></i>模板下载
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="GettudentUploadTemplate"><a id="linkUrl">学生Excel模板</a></el-dropdown-item>
						<el-dropdown-item @click.native="GetteacherUploadTemplate"><a id="linkUrlteacher">老师Excel模板</a></el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-dropdown>
					<div style="color: #cecece;cursor: pointer;">
						<i class="el-icon-upload2"></i>批量上传
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>
							<el-upload class="filter-item" name="studentExcelFile" :action="uploadUrl()" :on-error="uploadFalse" :on-success="uploadSuccess"
							 :before-upload="beforeUpload" :limit="1" accept=".xlsx,.xls" :show-file-list="false" :file-list="fileList"
							 :headers="myHeader">
								<span>学生信息</span>
							</el-upload>
						</el-dropdown-item>
						<el-dropdown-item>
							<el-upload class="filter-item" name="teacherExcelFile" :action="uploadUrlTeacher()" :on-error="uploadFalse"
							 :on-success="uploadSuccess" :before-upload="beforeUpload" :limit="1" accept=".xlsx,.xls" :show-file-list="false"
							 :file-list="fileList" :headers="myHeader">
								<span>老师信息</span>
							</el-upload>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<div class="header1">
					<div>
						<el-dropdown>
							<button @click="centerDialogVisible=true">
								<i class="el-icon-plus"></i>添加学生
							</button>
						</el-dropdown>

						<button @click="centerDialogVisiblet=true">添加老师</button>
					</div>
					<!-- <el-input v-model="search" placeholder="请输入内容" suffix-icon="fa fa-search"></el-input> -->
				</div>
			</div>
		</div>
		<div class="operation">
			<div class="middle">
				<div>
					角色：
					<el-select v-model="value" placeholder="请选择角色" @change="Changeselect">
						<el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					是否注册：
					<el-select v-model="value1" placeholder="请选择" @change="Change1()">
						<el-option v-for="(item,index) in options1" :key="index+'kk'" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>

			</div>
			<el-table ref="multipleTable" :data="tableDataStudent" tooltip-effect="dark" style="width: 100%;overflow: auto;height: 28.75rem;margin-top: 1.25rem;"
			 @selection-change="handleSelectionChange" :header-cell-style="{'background-color': '#f2f4f7'}" :cell-style="{padding:'20px 0'}"
			 v-show="active">
				<el-table-column type="selection">
				</el-table-column>
				<el-table-column label="姓名">
					<template slot-scope="scope">{{ scope.row.studentName }}</template>
				</el-table-column>
				<el-table-column prop="studentNum" label="学号/工号">
				</el-table-column>
				<el-table-column prop="collegeName" label="院系">
				</el-table-column>
				<el-table-column prop="majorName" label="专业">
				</el-table-column>
				<el-table-column prop="studentCard" label="身份证">
				</el-table-column>
				<el-table-column label="是否注册" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.isRegister==1">是</el-tag>
						<el-tag v-if="scope.row.isRegister==0" type="success">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-button size="small" @click="deleteStudent(scope.row.studentId)" >删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-table ref="multipleTable" :data="tableDataSchool" tooltip-effect="dark" style="width: 100%;overflow: auto;height: 28.75rem;margin-top: 1.25rem;"
			 @selection-change="handleSelectionChange" :header-cell-style="{'background-color': '#f2f4f7'}" :cell-style="{padding:'20px 0'}"
			 v-show="!active">
				<el-table-column type="selection">
				</el-table-column>
				<el-table-column label="姓名">
					<template slot-scope="scope">{{ scope.row.teacherName }}</template>
				</el-table-column>
				<el-table-column prop="teacherNum" label="学号/工号">
				</el-table-column>
				<el-table-column prop="teacherCard" label="身份证">
				</el-table-column>
				<el-table-column label="是否注册" show-overflow-tooltip prop="isRegister">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.isRegister==1">是</el-tag>
						<el-tag v-if="scope.row.isRegister==0" type="success">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-button size="small" @click="deleteTeacher(scope.row.teacherId)" >删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="添加老师" :visible.sync="centerDialogVisiblet" width="30%" center>
			<el-input v-model="teacher.teacherName" placeholder="姓名"></el-input>
			<el-input v-model="teacher.teacherNum" placeholder="学号工号"></el-input>
			<el-input v-model="teacher.teacherCard" placeholder="身份证"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisiblet = false">取 消</el-button>
				<el-button type="primary" @click="InsertTeacher()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加学生" :visible.sync="centerDialogVisible" width="30%" center>
			<el-input v-model="student.studentName" placeholder="姓名"></el-input>
			<el-input v-model="student.studentNum" placeholder="学号"></el-input>
			<el-input v-model="student.studentCard" placeholder="身份证"></el-input>
			<el-select v-model="student.collegeId" placeholder="学院" @change="SelectMajorListByCollegeId()">
				<el-option v-for="item in SelectCollegeList" :key="item.collegeId" :label="item.collegeName" :value="item.collegeId">
				</el-option>
			</el-select>
			<el-select v-model="student.majorId" placeholder="专业">
				<el-option v-for="item in SelectMajorList" :key="item.majorId" :label="item.majorName" :value="item.majorId">
				</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">

				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="InsertStudentByExcel()">确 定</el-button>

			</span>
		</el-dialog>
	</div>

</template>

<script>
	import XLSX from 'xlsx'
	import {
		BASE_URL
	} from "../../../../request/config.js"
	import {
		HttpManager
	} from '../../../../request/Teacher.js'
	export default {
		data() {
			return {
				options: [{
					label: "学生",
					value: 2
				}, {
					label: "老师",
					value: 1

				}],
				value: '学生',
				options1: [{
						label: "全部",
						value: 2
					},
					{
						label: "已注册",
						value: 1

					}, {
						label: "未注册",
						value: 0
					}
				],
				value1: '',
				tableData: [],
				tableLabel: [],
				multipleSelection: [],
				active: true,
				centerDialogVisible: false,
				centerDialogVisiblet: false,
				school: 1,
				tableDataStudent: [],
				tableDataSchool: [],
				student: {
					studentName: '',
					studentNum: '',
					studentCard: '',
					schoolId: 1,
					majorId: '',
					collegeId: ''
				},
				teacher: {
					teacherCard: '',
					schoolId: '',
					teacherName: '',
					teacherNum: ''
				},
				SelectCollegeList: [],
				SelectMajorList: [],
				fullscreenLoading: false, // 上传文件加载
				limit: 1, // 上传excell时，同时允许上传的最大数
				fileList: [],

				myHeader: {
					token: window.localStorage.getItem("token")
				}


			}
		},
		created() {
			this.InitselectSchool();
			this.InitselectStudent();
			this.SelectCollegeListBySchoolId();
		},
		methods: {
			//获取学校id
			InitselectSchool() {
				HttpManager.InitselectSchool().then(e => {
					console.log(e.data.data);
					this.school = e.data.data.schoolId;
				})
			},
			//初始化页面
			InitselectStudent() {
				if (this.value1 == 2) {
					var parmas = {
						page: 0,
						size: 100,
						schoolId: this.school,
					}
				} else {
					var parmas = {
						page: 0,
						size: 100,
						schoolId: this.school,
						isRegister: this.value1
					}
				}
				HttpManager.InitselectStudent(parmas).then(e => {
					console.log(e.data.data);
					this.tableDataStudent = e.data.data;
				})
			},
			//获取老师页面
			selectTeacher() {
				if (this.value1 == 2) {
					var parmas = {
						page: 0,
						size: 100,
						schoolId: this.school,
					}
				} else {
					var parmas = {
						page: 0,
						size: 100,
						schoolId: this.school,
						isRegister: this.value1
					}
				}
				HttpManager.selectTeacher(parmas).then(e => {
					console.log(e.data.data);
					this.tableDataSchool = e.data.data;
				})
			},
			//筛选
			Changeselect() {

				if (this.value == 1) {
					this.active = false;
					this.selectTeacher();
				} else if (this.value == 2) {
					this.active = true;
					this.InitselectStudent();
				}

			},
			Change1() {
				
				this.Changeselect();
			},
			//下载老师模板
			GetteacherUploadTemplate() {
				let link = document.getElementById("linkUrlteacher");
				link.href = BASE_URL + '/teacher/download/teacherUploadTemplate';
				link.click();
			},
			//下载学生模板
			GettudentUploadTemplate() {
				let link = document.getElementById("linkUrl");
				link.href = BASE_URL + '/student/download/studentUploadTemplate';
				link.click();
			},
			//获取学院信息
			SelectCollegeListBySchoolId() {
				var parmas = {
					schoolId: this.school
				}
				HttpManager.SelectCollegeListBySchoolId(parmas).then(e => {
					console.log(e.data.data);
					this.SelectCollegeList = e.data.data;
				})
			},
			//获取专业
			SelectMajorListByCollegeId() {
				var parmas = {
					collegeId: this.student.collegeId
				}
				HttpManager.SelectMajorListByCollegeId(parmas).then(e => {
					console.log(e.data.data);
					this.SelectMajorList = e.data.data;
				})
			},
			//添加学生
			InsertStudentByExcel() {
				// alert(2);
				this.student.schoolId = this.school;
				HttpManager.InsertStudent(this.qs.stringify(this.student)).then(e => {
					console.log(e.data.data);
					this.centerDialogVisible = false;
					this.InitselectStudent();
				})
			},
			//添加老师
			InsertTeacher() {
				this.teacher.schoolId = this.school;
				HttpManager.InsertTeacher(this.qs.stringify(this.teacher)).then(e => {
					console.log(e.data.data);
					this.centerDialogVisiblet = false;
					this.teacher = {
						teacherCard: '',
						schoolId: '',
						teacherName: '',
						teacherNum: ''
					};
					this.selectTeacher();
				})
			},

			handleSelectionChange() {

			},
			selectionChange() {

			},
			input() {

			},
			uploadSuccess(response, file, fileList) {
				console.log(response)
				if (response.code == 200) {
					this.$message({
						message: response.message,
						type: 'success'
					});
				} else {
					this.$message({
						message: response.message,
						type: 'error'
					});
				}
			},
			//导入老师数据
			uploadUrlTeacher() {
				return (
					BASE_URL + '/teacher/insertTeacherByExcel'
				);
			},
			uploadFalse(response, file, fileList) {
				this.$message({
					message: '文件上传失败！',
					type: 'error'
				});
			},

			beforeUpload(file) {
				let filename = file.name
				let arr = filename.split('.')
				if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
					this.$message.error('上传文件只能是 excel/xls 格式!')
					return false
				}
				return arr
			},
			//导入学生
			uploadUrl: function() {
				return (
					BASE_URL + '/student/insertStudentByExcel'
				);
			},
			deleteTeacher(teacherId)
			{
				var parmas={
					teacher_id:teacherId
				}
				HttpManager.deleteTeacher(this.qs.stringify(parmas)).then(e=>{
					console.log(e);
					this.InitselectStudent();
				})
			},
			deleteStudent(studentId)
			{
				alert(studentId)
				var parmas={
					student_id:studentId
				}
				HttpManager.deleteStudent(this.qs.stringify(parmas)).then(e=>{
					console.log(e);
					this.InitselectStudent();
				})
			}
			



		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main_content_1 {
		margin-left: 20px;
		margin-right: 1.25rem;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;
		margin-right: 1.25rem;


		// 搜索框
		.dataSearch {
			display: flex;
			width: 300px;
			height: 36px;
			line-height: 36px;
			color: #cecece;
		}

	}

	.staTabName {
		display: flex;
		list-style: none;
		cursor: pointer;
	}

	.staTabName li {
		margin-left: 2.25rem;
	}


	.el-dropdown {
		height: 36px;
		line-height: 36px;
		// width: 6.25rem;
	}


	.header1 button {
		height: 40px;
		width: 100px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 20px;
		cursor: pointer;
	}

	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.middle {
		/* border: 1px solid; */
		height: 40px;
		font-size: 0.875rem;
		margin-top: 10px;
		margin-bottom: 0.625rem;
		display: flex;
		justify-content: space-between;
	}


	.operation {
		width: 100%;
		height: 100%;
		margin-top: 1.25rem;
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	.el-select {
		width: 150px;
	}

	.el-input,
	.el-dialog .el-select {
		margin-top: 1.25rem;
	}

	.el-dialog .el-select {
		width: 100%;
	}

	.staTabName {
		margin-top: 1.25rem;
		height: 60px;
		line-height: 60px;
		// padding-left: 20px;
	}

	.active {
		color: #03d3bd;
		font-weight: 600;
		position: relative;
	}

	a {
		text-align: none;
	}
</style>
